<template>
  <div class="order-management">
    <el-card class="main-card">
      <template #header>
        <div class="card-header">
          <span class="title">订单管理</span>
        </div>
      </template>
      
      <el-table :data="orderList" style="width: 100%" v-loading="loading">
        <el-table-column prop="orderId" label="订单ID" width="100" />
        <el-table-column prop="userId" label="用户ID" width="100" />
        <el-table-column label="商品信息" width="300">
          <template #default="{ row }">
            <div v-if="row.goodsInfo" class="goods-info">
              <el-image
                :src="IMAGE_URL + row.goodsInfo.images[0]"
                fit="cover"
                style="width: 60px; height: 60px; border-radius: 4px"
              />
              <div class="goods-detail">
                <div class="goods-title">{{ row.goodsInfo.title }}</div>
                <div class="goods-price">
                  <span class="current-price">¥{{ row.goodsInfo.currentPrice }}</span>
                  <span class="original-price">¥{{ row.goodsInfo.originalPrice }}</span>
                </div>
              </div>
            </div>
            <div v-else>加载中...</div>
          </template>
        </el-table-column>
        <el-table-column label="收货地址" width="300">
          <template #default="{ row }">
            <div v-if="row.addressInfo" class="address-info">
              <div class="address-name">
                <span>{{ row.addressInfo.name }}</span>
                <span class="phone">{{ row.addressInfo.phone }}</span>
              </div>
              <div class="address-detail">{{ row.addressInfo.area }}{{ row.addressInfo.areaDetail }}</div>
            </div>
            <div v-else>加载中...</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="way" label="支付方式" width="120" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column prop="num" label="数量" width="100" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleView(row)">查看</el-button>
            <el-button type="warning" link @click="handleEdit(row)">修改</el-button>
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 查看详情对话框 -->
    <el-dialog
      v-model="detailVisible"
      title="订单详情"
      width="700px"
      destroy-on-close
      class="order-dialog"
    >
      <div v-if="currentOrder" class="order-detail">
        <div class="detail-header">
          <h2>订单详情</h2>
          <el-tag :type="getStatusType(currentOrder.status)">
            {{ getStatusText(currentOrder.status) }}
          </el-tag>
        </div>
        <div class="detail-content">
          <div class="detail-section">
            <h3>基本信息</h3>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="订单ID">{{ currentOrder.orderId }}</el-descriptions-item>
              <el-descriptions-item label="用户ID">{{ currentOrder.userId }}</el-descriptions-item>
              <el-descriptions-item label="支付方式">{{ currentOrder.way }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ currentOrder.createTime }}</el-descriptions-item>
              <el-descriptions-item label="数量">{{ currentOrder.num }}</el-descriptions-item>
            </el-descriptions>
          </div>

          <div class="detail-section">
            <h3>商品信息</h3>
            <div v-if="currentOrder.goodsInfo" class="goods-info">
              <el-image
                :src="IMAGE_URL + currentOrder.goodsInfo.images[0]"
                fit="cover"
                style="width: 100px; height: 100px; border-radius: 4px"
              />
              <div class="goods-detail">
                <div class="goods-title">{{ currentOrder.goodsInfo.title }}</div>
                <div class="goods-text">{{ currentOrder.goodsInfo.text }}</div>
                <div class="goods-price">
                  <span class="current-price">¥{{ currentOrder.goodsInfo.currentPrice }}</span>
                  <span class="original-price">¥{{ currentOrder.goodsInfo.originalPrice }}</span>
                </div>
                <div class="goods-label">
                  <el-tag size="small" type="warning">{{ currentOrder.goodsInfo.label }}</el-tag>
                  <span class="business-name">{{ currentOrder.goodsInfo.businessName }}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="detail-section">
            <h3>收货地址</h3>
            <div v-if="currentOrder.addressInfo" class="address-info">
              <el-descriptions :column="1" border>
                <el-descriptions-item label="收货人">{{ currentOrder.addressInfo.name }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ currentOrder.addressInfo.phone }}</el-descriptions-item>
                <el-descriptions-item label="所在地区">{{ currentOrder.addressInfo.area }}</el-descriptions-item>
                <el-descriptions-item label="详细地址">{{ currentOrder.addressInfo.areaDetail }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="editVisible"
      title="编辑订单"
      width="500px"
      destroy-on-close
      class="order-dialog"
    >
      <div v-if="currentOrder" class="order-edit">
        <el-form :model="currentOrder" label-width="100px">
          <el-form-item label="订单状态">
            <el-select v-model="currentOrder.status" placeholder="请选择状态">
              <el-option label="待付款" :value="0" />
              <el-option label="待发货" :value="1" />
              <el-option label="已发货" :value="2" />
              <el-option label="已取消" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="支付方式">
            <el-input v-model="currentOrder.way" placeholder="请输入支付方式" />
          </el-form-item>
          <el-form-item label="商品数量">
            <el-input-number v-model="currentOrder.num" :min="1" />
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button @click="editVisible = false">取消</el-button>
          <el-button type="primary" @click="handleUpdate">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getOrderList, updateOrder, deleteOrder } from '@/api/order'
import { getGoodsDetail } from '@/api/goods'
import { getAddressDetail } from '@/api/address'
import { IMAGE_URL } from '@/utils/request'

const loading = ref(false)
const orderList = ref([])
const detailVisible = ref(false)
const editVisible = ref(false)
const currentOrder = ref(null)

// 获取商品信息
const getGoodsInfo = async (goodsId) => {
  try {
    const res = await getGoodsDetail(goodsId)
    return res.data
  } catch (error) {
    console.error('获取商品信息失败:', error)
    return null
  }
}

// 获取地址信息
const getAddressInfo = async (addressId) => {
  try {
    const res = await getAddressDetail(addressId)
    return res.data
  } catch (error) {
    console.error('获取地址信息失败:', error)
    return null
  }
}

// 获取订单列表
const getList = async () => {
  loading.value = true
  try {
    const res = await getOrderList()
    orderList.value = res.data
    
    // 获取每个订单的商品和地址信息
    for (const order of orderList.value) {
      order.goodsInfo = await getGoodsInfo(order.goodsId)
      order.addressInfo = await getAddressInfo(order.addressId)
    }
  } catch (error) {
    console.error('获取订单列表失败:', error)
    ElMessage.error('获取订单列表失败')
  } finally {
    loading.value = false
  }
}

// 查看订单详情
const handleView = (row) => {
  currentOrder.value = { ...row }
  detailVisible.value = true
}

// 编辑订单
const handleEdit = (row) => {
  currentOrder.value = { ...row }
  editVisible.value = true
}

// 更新订单
const handleUpdate = async () => {
  try {
    await updateOrder(currentOrder.value.orderId, currentOrder.value)
    ElMessage.success('更新成功')
    editVisible.value = false
    getList()
  } catch (error) {
    console.error('更新失败:', error)
    ElMessage.error('更新失败')
  }
}

// 删除订单
const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除该订单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      await deleteOrder(row.orderId)
      ElMessage.success('删除成功')
      getList()
    } catch (error) {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  })
}

// 获取状态类型
const getStatusType = (status) => {
  const types = {
    0: 'info',    // 待付款
    1: 'warning', // 待发货
    2: 'success', // 已发货
    3: 'danger'   // 已取消
  }
  return types[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const texts = {
    0: '待付款',
    1: '待发货',
    2: '已发货',
    3: '已取消'
  }
  return texts[status] || '未知状态'
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.order-management {
  padding: 20px;
}

.main-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.order-detail {
  padding: 20px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.detail-header h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-section {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
}

.goods-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.goods-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.goods-title {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  line-height: 1.4;
}

.goods-text {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
}

.goods-price {
  display: flex;
  align-items: center;
  gap: 8px;
}

.current-price {
  font-size: 16px;
  color: #f56c6c;
  font-weight: 500;
}

.original-price {
  font-size: 12px;
  color: #909399;
  text-decoration: line-through;
}

.goods-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.business-name {
  font-size: 12px;
  color: #606266;
}

.address-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.address-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #303133;
}

.phone {
  color: #606266;
}

.address-detail {
  font-size: 12px;
  color: #606266;
  line-height: 1.4;
}

.detail-section h3 {
  margin: 0 0 16px;
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

:deep(.el-tag--small) {
  height: 20px;
  padding: 0 6px;
  line-height: 20px;
}

.order-edit {
  padding: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-input-number) {
  width: 100%;
}
</style> 